import React, { memo } from "react";
import SwiperList from "@/components/common/swiper";
import { swiperType } from "@/models/swiper";
import { Wrapper, ContentWrapper, RecommendItem } from "./style";
import LazyLoad from "react-lazyload";
import defaultImg from "@/assets/images/default.jpg";
import { formatTenThousand, titleDelTag } from "@/utils/index";
import MyImg from "@/components/common/myImg";
import { InfiniteScroll } from "antd-mobile";
import { sleep } from "antd-mobile/es/utils/sleep";

interface CardInfoProps {
  swipers?: swiperType[];
  list: any[];
  loadMore?: (isRetry: boolean) => Promise<void>;
  hasMore?: boolean;
  setlike?: (id: number, liked: boolean) => void;
}

const CardInfo: React.FC<CardInfoProps> = (props) => {
  const { swipers, list, hasMore = false } = props;
  const {
    loadMore = async () => {
      await sleep(1000);
    },
    setlike = () => {},
  } = props;

  const recommendElement =
    list !== undefined &&
    list.length > 0 &&
    list.map((item, index) => {
      return (
        item.postData !== null && (
          <RecommendItem
            key={item.itemId + index}
            // 传入图片宽高比例，决定图片容器长度
            imgHeight={
              item.postData.postView.type == 1
                ? 0
                : Math.floor(
                    item.postData.postView.firstImage.oh /
                      item.postData.postView.firstImage.ow
                  )
            }
          >
            {
              // 数据type=1，为小说，小说阅读形式展示
              item.postData.postView.type == 1 && (
                <div className="recommend-item-Article">
                  <p className="article-title">
                    {titleDelTag(item.postData.postView.title)}
                  </p>
                  <p
                    className="article-content"
                    dangerouslySetInnerHTML={{
                      __html: titleDelTag(item.postData.postView.digest),
                    }}
                  ></p>
                </div>
              )
            }
            {
              // type=2,图片内容，type=3视频内容
              item.postData.postView.type !== 1 && (
                <>
                  <div className="img_container">
                    <LazyLoad
                      placeholder={
                        <img
                          className="img"
                          src={defaultImg}
                        />
                      }
                    >
                      <MyImg
                        className="img"
                        src={item.postData.postView.firstImage.orign}
                        defaultImg={defaultImg}
                      />
                    </LazyLoad>
                  </div>
                  <div className="recommend-item-title">
                    {/* 标题数据去除标签<p></p> */}
                    <p>{titleDelTag(item.postData.postView.digest)}</p>
                    <span>
                      <i className="fa fa-ellipsis-v " />
                    </span>
                  </div>
                </>
              )
            }
            <div className="recommend-item-label">
              #{item.postData.postView.tagList[0]}
            </div>
            <div className="recommend-item-bt">
              <div className="author-info">
                <LazyLoad
                  placeholder={
                    <img
                      className="img"
                      src={defaultImg}
                    />
                  }
                >
                  <MyImg
                    className="img"
                    src={item.blogInfo.bigAvaImg}
                    defaultImg={defaultImg}
                  />
                </LazyLoad>
                <p>{item.blogInfo.blogNickName}</p>
              </div>
              <div
                className="like-count"
                onClick={() => setlike(item.itemId, item.favorite)}
              >
                {item.favorite ? (
                  <i className="fa fa-heart  " />
                ) : (
                  <i className="fa fa-heart-o " />
                )}
                {/* 点赞数过万，以xx.w形式展示 */}
                <span>
                  {formatTenThousand(item.postData.postCount.favoriteCount)}
                </span>
              </div>
            </div>
          </RecommendItem>
        )
      );
    });

  return (
    <Wrapper>
      {/* 幻灯片 */}
      {swipers && swipers.length && <SwiperList list={swipers} />}
      {/* 瀑布流布局推荐列表 */}
      <ContentWrapper>{recommendElement}</ContentWrapper>
      {list !== undefined && list.length == 0 && (
        <div style={{ height: "200px" }}>11111</div>
      )}
      {/* 上拉加载更多 */}
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={100} />
    </Wrapper>
  );
};

export default memo(CardInfo);
